// 本地接口地址
// var base_url = 'http://192.168.1.111:8090/xmsc';
// 杨
// var base_url = 'http://192.168.1.156:8092/xmsc' ;
// var base_url = 'http://192.168.1.128:8090/xmsc';
// 龙
// var base_url = 'http://192.168.1.180:8090/xmsc'
// 线上接口地址
// var base_url = 'http://39.105.19.58:8092/xmsc';
var base_url = 'http://39.96.36.44:8080/xmsc';


Vue.component('headers', {
        template: ` 
<div @click='document_click'>
    <div class="max_width header">
        <div class="wrap">
            <div class="header_nav fr">
                <ul class="nav_list">
                    <li class="personname" v-show='!person_infos' @click.stop='cancle_info'><img :src="info.viaUrl" class="fl header_img" alt=""  >
                        <span class="fl" >{{info.nickname}}</span>
                        <div class="zhuxiao" v-show='cancle' @click='clear_info'>注销</div>
                    </li>
                    <li class="login_btn nav_item" @click='login_btn' v-show='person_infos'>登陆</li>
                    <li class="nav_item" @click='register'  v-show='person_infos'>免费注册</li>
                    <!-- <li class="nav_line"></li> -->
                    <li class="nav_item " @click.stop='person_vip'>
                        <div :class="{active:person_vips}">会员中心 <img src="../images/icon_down.png" alt="" class="nav_icon"></div>
                        <div class="person_sub" v-show='person_vips'>
                            <ul>
                                <li @click='person_order'>首页</li>
                                <li @click='person_center'>我的订单</li>
                                <li @click='person_address'>收货地址</li>
                                <li @click='person_exchange_page'>积分换货</li>                          
                                <li @click='person_intergal'>积分订单</li>
                                <li @click='person_collection'>我的收藏</li>
                                <li @click='person_foot'>浏览足迹</li>
                                <li @click='person_ticket'>优惠券</li>
                                <li @click='person_info'>个人设置</li>
                                <li @click='person_messages'>消息中心</li>
                            </ul>
                        </div>
                    </li>
                    <!-- <li class="nav_line"></li> -->
                    <li class="nav_item">商家后台</li>
                    <!-- <li class="nav_line"></li> -->
                    <li class="nav_item" @click.stop='service'>
                        <div :class="{active:services}">客户服务 <img src="../images/icon_down.png" alt="" class="nav_icon"></div>
                        <div class="person_sub" v-show='services'>
                            <ul>
                                <li @click='feedback'>用户反馈</li>
                            </ul>
                        </div>
                    </li>
                    <!-- <li class="nav_line"></li> -->
                    <li class="nav_item">手机商城</li>
                </ul>
            </div>
        </div>
    </div>
</div>`,
        data() {
            return {
                services: false,
                person_vips: false,
                person_infos: true,
                info: '',
                cancle: false
            }
        },
        mounted() {
            this.getUserByToken()
        },
        methods: {
            feedback() {
                window.location.href = '../integral/feedback.html'
            },
            // 注销登录
            cancle_info() {
                this.cancle = !this.cancle
            },
            clear_info() {
                localStorage.clear()
                this.person_infos = !this.person_infos
            },
            // 获取个人信息
            getUserByToken() {
                var that = this
                axios({
                        method: "POST",
                        url: base_url + "/user/getUserByToken",
                        data: Qs.stringify({}),
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            "TOKEN": localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        if (res.data.code == 1) {
                            that.person_infos = false
                            that.info = res.data.data.info
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },

            // 导航条
            // index_page(){
            //     window.location.href = '../../index.html'
            // },
            person_vip() {
                if (localStorage.getItem('wACCESS_TOKEN') == null) {
                    this.$message.error('请登录');
                } else {
                    this.services = false
                    this.person_vips = !this.person_vips
                }
            },
            service() {
                this.services = !this.services
                this.person_vips = false
            },
            document_click() {
                this.services = false
                this.person_vips = false
            },
            login_btn() {
                window.location.href = '../login_register/login.html'
            },
            register() {
                window.location.href = '../login_register/register.html'
            },
            person_order() {
                window.location.href = '../person_vip/person_order.html'
            },
            person_address() {
                window.location.href = '../person_vip/person_address.html'
            },
            person_exchange_page() {
                window.location.href = '../person_vip/person_exchange_page.html'
            },
            person_center() {
                window.location.href = '../person_vip/person_center.html?index=' + '0'
            },
            person_intergal() {
                window.location.href = '../person_vip/person_integral_order.html'
            },
            person_collection() {
                window.location.href = '../person_vip/person_collection.html'
            },
            person_ticket() {
                window.location.href = '../person_vip/person_ticket.html'
            },
            person_info() {
                window.location.href = '../person_vip/person_info.html'
            },
            person_foot() {
                window.location.href = '../person_vip/person_footprint.html'
            },
            person_messages() {
                window.location.href = '../person_vip/person_message.html'
            },
        }
    }),





    Vue.component('side_nav', {
        template: `<!-- side_nav -->
    <div class="side_nav">
            <ul>
                <li>
                    <div class="side_icon fr" @mouseenter='geren_hover' @mouseleave='geren_leave' @click='geren_page'>
                        <img src="../images/icon_my.png" alt="">
                    </div>
                    <div class="hide_icon fl" v-show='geren'>会员中心</div>
                </li>
                <li>
                    <div class="side_icon fr" @mouseenter='gouwuche_hover' @mouseleave='gouwuche_leave' @click='gouwuche_page'>
                        <img src="../images/iocn_gouwu_2.png" alt="">
                    </div>
                    <div class="hide_icon fl" v-show='gouwuche'>购物车</div>
                </li>
                <li>
                    <div class="side_icon fr" @mouseenter='shoucang_hover' @mouseleave='shoucang_leave' @click='shoucang_page'>
                        <img src="../images/icon_shoucang_2.png" alt="">
                    </div>
                    <div class="hide_icon fl" v-show='shoucang'>收藏</div>
                </li>
                <li>
                    <div class="side_icon fr" @mouseenter='zuji_hover' @mouseleave='zuji_leave' @click='zuji_page'>
                        <img src="../images/icon_zuji_2.png" alt="">
                    </div>
                    <div class="hide_icon fl" v-show='zuji'>我的足迹</div>
                </li>
                <li>
                    <div class="side_icon fr" @mouseenter='liaotian_hover' @mouseleave='liaotian_leave' @click='liaotian_page'>
                        <img src="../images/icon_xiaoxi_2.png" alt="">
                    </div>
                    <div class="hide_icon fl" v-show='liaotian'>消息中心</div>
                </li>
            </ul>
        </div>
`,
        data() {
            return {
                // 侧导航
                geren: false,
                gouwuche: false,
                shoucang: false,
                zuji: false,
                liaotian: false,
            }
        },
        methods: {
            // 侧导航
            geren_hover() {
                this.geren = true
            },
            geren_leave() {
                this.geren = false
            },
            geren_page() {
                window.location.href = '../person_vip/person_order.html'
            },
            gouwuche_hover() {
                this.gouwuche = true
            },
            gouwuche_leave() {
                this.gouwuche = false
            },
            gouwuche_page() {
                window.location.href = '../product/shop_car.html'
            },
            shoucang_hover() {
                this.shoucang = true
            },
            shoucang_leave() {
                this.shoucang = false
            },
            shoucang_page() {
                window.location.href = '../person_vip/person_collection.html'
            },
            zuji_hover() {
                this.zuji = true
            },
            zuji_leave() {
                this.zuji = false
            },
            zuji_page() {
                window.location.href = '../person_vip/person_footprint.html'
            },
            liaotian_hover() {
                this.liaotian = true
            },
            liaotian_leave() {
                this.liaotian = false
            },
            liaotian_page() {
                window.location.href = '../person_vip/person_message.html'
            }
        }
    })


Vue.component('searchs', {
    template: `<div class="search_box fl">
    <input type="text" name="" id="" v-model='word' class="search_input" :placeholder="search_text" @keyup.enter='submit'>
    <div class="search_btn" @click='search_btn'>
        <img src="../images/search-2.png" alt="">
    </div>
    <div class="history_search">
        <ul>
            <li class='cursor' v-for ='(item,index) in hot_list' @click='search_nav(item.searchName)'>{{item.searchName}}</li>
        </ul>
    </div>
</div>
`,
    data() {
        return {
            hot_list: '',
            word: '',
            search_text: ''
        }
    },
    mounted() {
        this.hot_lists()
        this.search_text = decodeURIComponent(this.GetQueryString().keyword)
        if (this.search_text == 'undefined') {
            this.search_text = ''
        }
    },
    methods: {
        submit(e) {
            if (e.keyCode == 13) {
                window.location.href = '../product/search.html?keyword=' + this.word
            }
        },
        search_btn() {
            window.location.href = '../product/search.html?keyword=' + this.word
        },
        search_nav(word) {
            window.location.href = '../product/search.html?keyword=' + word
        },
        hot_lists() {
            var that = this
            axios({
                    method: "POST",
                    url: base_url + "/searchCount/list",
                    data: Qs.stringify({}),
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        "TOKEN": localStorage.getItem('wACCESS_TOKEN')
                    }
                })
                .then(function (res) {
                    that.hot_list = res.data.data.list.list
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        GetQueryString() {
            var obj = new Object()
            var scan_url = window.location.href.split('?')[1];
            var strs = scan_url.split('&');
            for (var x in strs) {
                var arr = strs[x].split('=');
                obj[arr[0]] = arr[1]
            }
            return obj
        }
    }
})


Vue.component('logo', {
    template: `<div class="logo fl" @click='index'>

    </div>
`,
    data() {
        return {

        }
    },
    mounted() {

    },
    methods: {
        index() {
            console.log(1)
            window.location.href = '../../index.html'
        }
    }
})


Vue.component('car_box', {
    template: `<div class="car_box fl">
    <div class="search_shop_car cursor" @click='car_box' :class="{search_car_active:car_active}">
        <img src="../images/icon_gouwu.png" alt=""> <span class="fl">购物车（{{all_quantity}}）</span>
    </div>
    <div class="car_popup" v-show='car_active'>
        <div class="car_popup_list">
            <div class="car_popup_item" v-for='item in groups'>
                <div class="car_popup_img fl">
                    <img :src='item.goodsImgs' />
                </div>
                <div class="car_popup_tit fl">
                    {{item.goodsName}}
                </div>
                <div class="car_popup_money fr">
                    <p>￥{{item.goodsPrice}} x {{item.goodsQuantity}}</p>
                </div>
            </div>
        </div>
        <div class="car_popup_footer">
            <p class="car_all_money">共{{all_quantity}}件商品，共计￥{{all_price}}</p>
            <p class="car_popup_btn fr cursor" @click='go_shop_car'>去购物车</p>
        </div>
    </div>
</div>
`,
    props: {
        inputName: String
    },
    data() {
        return {
            // 导航条
            car_active: false,
            groups: '',
            quantity: '',
            all_quantity: 0,
            all_price: 0
        }
    },
    mounted() {
        this.wscl()
        this.scgq()
    },
    methods: {
        car_box() {
            if (this.car_active == false) {
                this.car_active = true
            } else if (this.car_active == true) {
                this.car_active = false
            }
            // this.car_active = !this.car_active
        },
        go_shop_car() {
            window.location.href = '../product/shop_car.html'
        },
        // 购物车

        scgq() {
            var that = this
            axios({
                    method: "POST",
                    url: base_url + "/sc/scgq",
                    data: Qs.stringify({}),
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        "TOKEN": localStorage.getItem('wACCESS_TOKEN')
                    }
                })
                .then(function (res) {
                    that.quantity = res.data.data.quantity
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        wscl() {
            var that = this
            axios({
                    method: "POST",
                    url: base_url + "/sc/wscl",
                    data: Qs.stringify({}),
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        "TOKEN": localStorage.getItem('wACCESS_TOKEN')
                    }
                })
                .then(function (res) {
                    that.groups = res.data.data.list
                    var all_quantity = 0
                    var all_price = 0
                    for (let i = 0; i < res.data.data.list.length; i++) {
                        all_quantity += res.data.data.list[i].goodsQuantity
                    }
                    for (let j = 0; j < res.data.data.list.length; j++) {
                        all_price += res.data.data.list[j].goodsQuantity * res.data.data.list[j].goodsPrice
                    }
                    that.all_price = all_price.toFixed(2)
                    that.all_quantity = all_quantity
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
    }
})

Vue.component('productfooter', {
    template: `<div class="wrap footer_copy">
    <div class="link_list">
        <span class="footer_link">关于我们</span>
        <span class="footer_link">联系我们</span>
        <span class="footer_link">开通店铺</span>
        <span class="footer_link">会员中心</span>
        <span class="footer_link">商家后台</span>
        <span class="footer_link">手机商城</span>
        <span class="footer_link">问题咨询</span>
        <span class="footer_link" @click='feedback'>意见反馈</span>
        <span class="footer_link">隐私政策</span>
    </div>

    
    <div class="copyright">
        京公网安备 11000002000088号|京ICP证070359号|互联网药品信息服务资格证编号(京)-经营性-2014-0008|新出发京零 字第大120007号
    </div>
    <div class="copyright">
        互联网出版许可证编号新出网证(京)字150号|出版物经营许可证|网络文化经营许可证京网文[2014]2148-348号|违法和不良信息举报电话：4006561155
    </div>

</div>
`,
    data() {
        return {
            hot_list: ''
        }
    },
    mounted() {},
    methods: {
        feedback() {
            top.location.href = '../integral/feedback.html'
        }
    }
})